<template>
	<div class="alertBox">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle" v-if="showTittle == 1">新建分组</p>
				<p class="tittle" v-else-if="showTittle == 2">修改分组</p>
				<div class="myClose" @click="closeGroup">
					<img src="~_assets/close.png" class="myClose"/>
				</div>
			</div>
			<div class="alertBody">
				<div class="changeDiv">
					<p class="alertText"><sup>*</sup>分组名称:</p>
					<input type="text" class="alertInput" placeholder="请输入分组名称" v-model="discountGroupName" maxlength=50/>
				</div>
				<div class="changeDiv">
					<p class="alertText"><sup>*</sup>地域:</p>
					<el-cascader :options="options" v-model="area" clearable></el-cascader>
				</div>
				<div class="alertBut">
					<button class="isFalse" @click="closeGroup">取消</button>
					<button class="isTrue" @click="addGroupIsTrue">确认</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { area } from "_config/common.js";
import { ADD_GROUPING, UPDATE_GROUPING_BYID } from "@/config/url";
export default {
  props: ["showTittle", "items", "groupItem"],
  data() {
    return {
      discountGroupName: this.groupItem.discountGroupName, //优惠分组名称
      options: area,
      area: [
        Number(this.groupItem.province),
        Number(this.groupItem.city),
        Number(this.groupItem.area)
      ] //省市区
    };
  },
  methods: {
    closeGroup() {
      this.$emit("closeGroup");
    },
    addGroupIsTrue() {
      //1是新增,2是修改
      if (this.showTittle == 1) {
        if (this.discountGroupName && this.area[0]) {
          if (this.discountGroupName.length < 2) {
            this.$message({
              message: "分组名称最少输入2个字符",
              type: "warning"
            });
            return;
          }
          this.$post(ADD_GROUPING, {
            discountGroupName: this.discountGroupName,
            province: this.area[0],
            city: this.area[1],
            area: this.area[2],
            activityCode: "d944afc8d6aa40058d55d25d4bfd610e",
            operator: "小丸子"
          }).then(
            res => {
              this.$message({
                showClose: true,
                type: "success",
                message: "添加成功!"
              });
              this.closeGroup();
              this.$parent.searchGroupList();
            },
            err => {
              this.$message({
                showClose: true,
                type: "warning",
                message: "网络异常,请稍后再试!"
              });
            }
          );
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "error"
          });
        }
      } else if (this.showTittle == 2) {
        if (this.discountGroupName.length < 2) {
          this.$message({
            message: "分组名称最少输入2个字符",
            type: "warning"
          });
          return;
        }
        if (this.discountGroupName && this.area[0]) {
          this.$post(UPDATE_GROUPING_BYID, {
            discountGroupName: this.discountGroupName,
            province: this.area[0],
            city: this.area[1],
            area: this.area[2],
            activityCode: "d944afc8d6aa40058d55d25d4bfd610e",
            operator: "小丸子",
            id: this.items.id
          }).then(
            res => {
              this.$message({
                showClose: true,
                type: "success",
                message: "修改成功!"
              });
              this.closeGroup();
              this.$parent.searchGroupList();
            },
            err => {
              this.$message({
                showClose: true,
                type: "warning",
                message: "网络异常,请稍后再试!"
              });
            }
          );
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "error"
          });
        }
      }
    }
  }
};
</script>

<style>
.alertBox .el-cascader {
  margin-left: 0.014rem;
}

.alertBox .el-cascader .el-input--suffix .el-input__inner {
  height: 0.2rem;
  border-radius: 8px;
  padding-left: 0.08rem;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(181, 194, 202, 1);
  margin-right: 0.1rem;
  margin-left: 0.04rem;
  padding-right: 0.3rem;
}
</style>